<template>
  <div class="main-container">
    <div class="ht100 pos-div" v-show="isSeeDetail">
      <van-form validate-first>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="ordernum"
            v-model="formdata.ordernum"
            label="单据号"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="applyouname"
            v-model="formdata.applyouname"
            label="公司"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="departmentname"
            v-model="formdata.departmentname"
            label="部门"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="createduser"
            v-model="formdata.createduser"
            label="创建人"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="createdate"
            v-model="formdata.createdate"
            label="创建日期"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="contactphone"
            v-model="formdata.contactphone"
            label="联系人电话"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="titelname"
            v-model="formdata.titelname"
            label="主题"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="handoverdate"
            v-model="formdata.handoverdate"
            label="送交时间"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="appuseremail"
            v-model="formdata.appuseremail"
            label="申请人Email"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="purpose"
            v-model="formdata.purpose"
            label="用途"
            autosize
            type="textarea"
            placeholder="{formdata.purpose}"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="appusertel"
            v-model="formdata.appusertel"
            label="申请人电话"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="appuserdept"
            v-model="formdata.appuserdept"
            label="申请人部门"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            label-width="6em"
            name="appusername"
            v-model="formdata.appusername"
            label="申请人"
            autosize
            type="textarea"
          />
        </div>
        <div class="border-b-1">
          <van-field
            readonly
            rows="1"
            name="remark"
            v-model="formdata.remark"
            autosize
            type="textarea"
            label="备注"
          />
        </div>
      </van-form>
      <div class="font14 color-3" style="margin-left: 1em; margin-top: 10px">
        申请表：
      </div>
      <div style="width: 100%; overflow-x: auto">
        <table style="margin: 10px">
          <tr
            v-for="(item, index) in lines"
            :key="index"
            class="font14 color-3"
          >
            <td v-for="(item1, index1) in tdArrs" :key="index1">
              {{ item[item1] }}
            </td>
          </tr>
        </table>
      </div>
      <div v-show="isSeeDetail">
        <div class="spline"></div>
        <div style="padding-bottom: 30px">
          <div class="stitle font14">审批意见</div>
          <div v-if="approveList.length > 0" class="swrap" style="width: 100%">
            <div
              class="spiece_flex"
              v-for="(item, index) in approveList"
              :key="index"
            >
              <div class="vertical-a-t display-ib" style="width: 25px">
                <i
                  v-if="index == 0"
                  class="iconfont icon-current font16 color-red2"
                ></i>
                <i
                  v-if="index > 0"
                  class="iconfont icon-yiban font16 color-theme"
                ></i>
                 <div v-if="index != (approveList.length-1)" class="optionline"></div>
              </div>
              <div class="vertical-a-t display-ib" style="width: calc(100%)">
                <div style="white-space: nowrap">
                  <span class="color-theme font14"
                    >{{ item.completeUser || "暂无" }}：</span
                  >
                  <span class="color-2 font14">{{
                    item.content || "暂无"
                  }}</span>
                </div>
                <div
                  class="mt05 color-8"
                  style="display: flex; align-items: baseline"
                >
                  <div
                    class="display-ib vertical-a-t font12"
                    style="margin-top: 2px;width: 100%"
                  >
                    {{ item.dept || "暂无" }}
                  </div>
                  <div
                    class="display-ib vertical-a-t font12 text-r"
                    style="margin-left: 10px; margin-top: 2px;text-align: right;width: 100%"
                  >
                    {{ item.completeDate || "暂无" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="color-9 font12 text-c">暂无数据</div>
          </div>
        </div>
      </div>
      <div v-if="isSeeDetail" style="margin-top: 20px">
        <div v-if="isSeeDetail" class="pof-btn">
          <van-button
            v-if="isSeeDetail"
            class="bg-theme color-f ht46 font15 flex1"
            native-type="submit"
            @click.native="onSubmit('pass')"
            >通过</van-button
          >
          <van-button
            v-if="isSeeDetail && hideCancel"
            class="bg-theme color-f ht46 font15 flex1"
            native-type="submit"
            @click.native="onSubmit('back')"
            >退回</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
   
<script>
// 15903668325

import { getDetail } from "@/api/newtodo";
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  name: "newDetail",
  data() {
    return {
      isSeeDetail: false,
      formdata: {},
      approveList: [],
      lines: [],
      orderType: "",
      mobileApprove: "",
      params: {},
      hideCancel: false,
      tableHeader: "tableHeader",
      tdArrs: [],
    };
  },
  created() {},
  activated() {
    this.getData();
  },
  methods: {
    onSubmit(type) {
      this.$router.push({
        name: "processnext",
        params: Object.assign(this.params, { actionCode: 1, nextFlow: type }),
      });
    },
    initTd() {
      // 1:belongouname  quantity cardname amount enableddate enddate dataitemcode
      // 2:belongouname changetypename msisdn imsi iccid cardname amount enableddate enddate dataitemcode
      // 3:brandcodename quantity cardname amount enableddate enddate dataitemcode
      // 4: changetypename msisdn imsi iccid cardname amount enableddate enddate dataitemcode
      switch (this.type) {
        case 1:
          this.tdArrs = [
            "belongouname",
            "quantity",
            "cardname",
            "amount",
            "enableddate",
            "enddate",
            "dataitemcode",
          ];
          break;
        case 2:
          this.tdArrs = [
            "belongouname",
            "changetypename",
            "msisdn",
            "imsi",
            "iccid",
            "cardname",
            "amount",
            "enableddate",
            "enddate",
            "dataitemcode",
          ];
          break;
        case 3:
          this.tdArrs = [
            "brandcodename",
            "quantity",
            "cardname",
            "amount",
            "enableddate",
            "enddate",
            "dataitemcode",
          ];
          break;
        case 4:
          this.tdArrs = [
            "changetypename",
            "msisdn",
            "imsi",
            "iccid",
            "cardname",
            "amount",
            "enableddate",
            "enddate",
            "dataitemcode",
          ];
          break;
      }
    },
    getData() {
      Toast.loading({
        message: "加载中...",
        forbidClick: false,
      });
      getDetail({ actId: this.params.actId, userName: this.user.userName })
        .then((result) => {
          Toast.clear();
          this.isSeeDetail = true;
          this.hideCancel = result.data.hideCancel == "0";
          this.formdata = result.data.header;
          this.params.procedure = result.data.orderType;
          if (result.data.approveList.step) {
            this.approveList.push(result.data.approveList.step);
          } else {
            this.approveList = result.data.approveList;
          }
          this.lines = [];

          if (result.data.lines.line) {
            this.lines.push(result.data.lines.line);
          } else {
            this.lines = result.data.lines;
          }
          this.lines.unshift({
            belongouname: "提供地市",
            brandcodename: "套餐",
            quantity: "数量",
            changetypename: "变更类型",
            msisdn: "测试号码",
            imsi: "IMSI",
            iccid: "ICCID",
            cardname: "测试卡名称",
            amount: "话费限额",
            enableddate: "开通时间",
            enddate: "终止时间",
            dataitemcode: "数据要求",
          });

          this.mobileApprove = result.data.mobileApprove;
          this.orderType = result.data.orderType;
          this.initTd();
        })
        .catch((e) => {
          Toast.clear();
          this.isSeeDetail = false;
        });
    },
  },
  computed: {
    ...mapGetters(["user"]),
    type() {
      if (!this.params.procedure) {
        return 1;
      }
      if (this.params.procedure.indexOf("省公司测试卡申请") != -1) {
        return 1;
      } else if (this.params.procedure.indexOf("省公司测试卡变更") != -1) {
        return 2;
      } else if (this.params.procedure.indexOf("分公司测试卡申请") != -1) {
        return 3;
      } else if (this.params.procedure.indexOf("分公司测试卡变更") != -1) {
        return 4;
      }
      return 1;
    },
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        if (!val.params.title && oldVal) {
          this.params = oldVal.params;
        } else {
          this.params = val.params;
        }
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style>
.van-field__label {
  color: #888 !important;
}

.van-field__control:read-only {
  color: #222 !important;
}

.border-w-20 {
  border: 1px solid #888;
  width: calc(100%-50px);
}
.width100 {
  width: 30%;
  word-wrap: break-word;
}
.mtb10 {
  margin-bottom: 10px;
  margin-top: 10px;
}
tr:first-child {
  color: #7abcf8;
}
tr td {
  padding: 0 5px;
  word-wrap: break-word;
  min-width: 85px;
  text-align: center;
  border: 1px solid #333;
}
/* tr:first-child td::first-letter {
  color: red;
} */
.flex_nowrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
</style>